<template>
  <div class="preview container">
    <div class="tree-w">
      <el-tree
        ref="tree"
        :data="list"
        :load="loadNode"
        lazy
        node-key="_id"
        :default-expand-all="true"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="name">{{ data.name }}</span>
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  name: "preview",
  data() {
    return {
      list: [],
      uid:this.$route.params.uid
    };
  },
  async mounted(){
     let list = await this.getList();
     this.list = this.handle(list)
  },
  methods: {
    handle(list){
      // 兼容
        for(let i = 0; i < list.length; i++){
          let item = list[i];
          if(item.ID){
              item._id = item.ID;
          }
        }
        return list;
    },
    async getList(params){
        params = params || {};
        params.uid = this.uid;
        if (!params.parent) {
            params.parent = -1;
        }
        let list = await this.$api.personWebList(params);
        this.handle(list)
        return Promise.resolve(list);
    },
    async loadNode(node, resolve) {
      let data = node.data || {};
      let childs = data.childs || 0;
      let id = data._id;
      if (childs <= 0 || !id) {
        resolve([]);
      } else {
        let list = await this.getList({ parent: id });
        this.handle(list)
        resolve(list);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.preview {
  .tree-w {
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed #ddd;
  }
}
</style>